<template>
  <div id="contianer">
    <el-row :gutter="10">
      <el-col :span="5">
        <el-scrollbar :style="scrollHeight">
          <el-card shadow="never" :body-style="contentViewHeight">
            <div class="title">知识数据目录</div>
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </el-card>
        </el-scrollbar>
      </el-col>
      <!--用户数据-->
      <el-col :span="19">
        <el-scrollbar :style="scrollHeight">
          <el-card shadow="never" :body-style="contentViewHeight">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              label-width="68px"
            >
              <el-form-item label="知识名称" prop="fileName">
                <el-input
                  v-model="queryParams.fileName"
                  placeholder="请输入知识名称"
                  clearable
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="small"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
            <el-table
              v-loading="loading"
              :data="userList"
              :max-height="tableClientHeight"
            >
              <el-table-column
                fixed="left"
                width="240px"
                label="知识名称"
                prop="knowledgeName"
              />
              <el-table-column
                fixed="left"
                width="240px"
                label="源文件名称"
                align="center"
                prop="fileName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="文件版次"
                align="center"
                prop="fileVersion"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="文件编号"
                align="center"
                prop="fileCode"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="上传人员"
                align="center"
                prop="uploadUser"
              />
              <el-table-column
                label="作者姓名"
                align="center"
                prop="author"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="数据来源"
                align="center"
                prop="sourceName"
              />
              <el-table-column
                label="上传日期"
                align="center"
                prop="uploadTime"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="文件格式"
                align="center"
                prop="fileFormat"
              />
              <el-table-column
                label="解析状态"
                align="center"
                prop="analyseStatusName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="发布状态"
                align="center"
                prop="dataStatusName"
              />
              <el-table-column
                label="确认状态"
                align="center"
                prop="labelStatusName"
              />
              <el-table-column
                label="确认时间"
                align="center"
                prop="labelTime"
               :show-overflow-tooltip="true"
              />
              <el-table-column
                label="确认人"
                align="center"
                prop="labelUserName"
              />

              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    style="display: inline-block; margin-left: 10px"
                    @click="edit(scope.row)"
                    >编辑</el-link
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageNo"
              :page-size="pageSize"
              :total="total"
              style="text-align: right; margin-top: 10px"
              layout="total, prev, pager, next, jumper"
              background
            >
            </el-pagination>
          </el-card>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchForm: {},
      loading: true,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      userList: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
      queryParams: {
        fileName: "",
        fileType: null,
        profession: null,
      },
      deptOptions: [],
    };
  },
  mounted() {
    // 监听 F5 或者手动刷新，刷新时清空 sessionStorage
    window.addEventListener("beforeunload", (event) => {
      if (event.type === "beforeunload") {
        sessionStorage.removeItem("queryParams");
      }
    });
    // 读取 sessionStorage
    const storedParams = sessionStorage.getItem("queryParams");
    if (storedParams) {
      this.queryParams = JSON.parse(storedParams);
    }
    this.getList();
    this.getDeptTree();
  },
  computed: {
    contentViewHeight() {
      const height = document.documentElement["clientHeight"] - 120;
      return { minHeight: height + "px" };
    },
    scrollHeight() {
      const height = document.documentElement["clientHeight"] - 110;
      return { height: height + "px" };
    },
    tableClientHeight() {
        // let tableClientHeight =
        //   document.documentElement.clientHeight || document.body.clientHeight;
        // tableClientHeight = tableClientHeight - 259;
        // return tableClientHeight;
    },
  },
  methods: {
    getList() {
      this.loading = true;
      this.$http({
        url: "/knowledgeData/list",
        method: "GET",
        params: {
          ...this.queryParams,
          pageSize: this.pageSize,
          pageNumber: this.pageNo,
          status:'1'
        },
      }).then(({ data }) => {
        this.userList = data.data.data;
        this.total = data.data.totalSize;
        this.loading = false;
      });
    },
    getDeptTree() {
      this.$http({
        url: "/knowledgeData/treeList",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        this.deptOptions = data.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
      this.pageNo = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams.fileName = "";
      this.queryParams.fileType = "";
      this.queryParams.profession = "";
      this.pageNo = 1;
      this.$refs.tree.setCurrentKey(null);
      sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
      this.getList();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getList();
    },
    handleNodeClick(data, node, item) {
      if (node.level === 2) {
        this.queryParams.profession = node.parent.data.value;
        this.queryParams.fileType = data.value;
      } else if (node.level === 1) {
        this.queryParams.profession = data.value;
        this.queryParams.fileType = null;
      }
      this.getList();
      sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
    },
    edit(row) {
      this.$router.push({
        path: "/knowledgeLabels/details",
        query: {
          row,
        },
      });
    },
    clearSessionStorage() {
      sessionStorage.removeItem("queryParams");
    },
  },
  beforeDestroy() {
    // 组件销毁时移除监听
    window.removeEventListener("beforeunload", this.clearSessionStorage);
  }
};
</script>
<style lang="scss" scoped>
#contianer {
  //   width: 98%;
  //   min-height: 96%;
  //   background: white;
  border-radius: 10px;
  padding: 10px 20px 0;
  //   margin: 20px;

  .tree_menu {
    position: absolute;
    width: 18%;
    border-right: 1px solid rgb(117, 97, 97);
    height: 100%;

    h2 {
      font-size: 20px;
      font-weight: 550;
    }
  }
  .table {
    width: 78%;
    float: right;
    padding: 20px 20px 0 0;
  }

  .screen_model {
    margin-bottom: 20px;
  }
}
</style>
